<template>
    <div>
            <Input class="article-title" v-model="addArticleTitle" size="large" placeholder="请在此输入文章标题"/>
            <vue-editor :customModules="customModulesForEditor" :editorOptions="editorSettings"
                        v-model="addContent"></vue-editor>
            <Button class="btn" type="primary" @click="saveText" :loading="saveTextLoading">
                <span v-if="!saveTextLoading">保存文章</span>
                <span v-else>正在保存</span>
            </Button>
            <Button class="btn" type="success">发布文章</Button>
            <Button class="btn" type="default">取消</Button>
    </div>
</template>

<script type="text/ecmascript-6">
    import {mapState, mapActions} from 'vuex'
    import {VueEditor} from 'vue2-editor'
    import {ImageDrop} from 'quill-image-drop-module'
    import ImageResize from 'quill-image-resize-module';

    export default{
        components: {
            VueEditor,
        },
        data () {
            return {
                customModulesForEditor: [
                    {alias: 'imageDrop', module: ImageDrop},
                    {alias: 'imageResize', module: ImageResize}
                ],
                editorSettings: {
                    modules: {
                        imageDrop: true,
                        imageResize: {}
                    }
                },
                saveTextLoading: false
            }
        },
        computed: {
            ...mapState('article', []),
            addContent: {//要使用v-model双向绑定必须这样写
                get () {
                    return this.$store.state.article.newContent
                },
                set (value) {
                    this.$store.commit('article/updateNewContent', value)
                }
            },
            addArticleTitle:{
                get(){
                    return this.$store.state.article.newArticleTitle;
                },
                set(value){
                    this.$store.commit('article/updateNewArticleTitle',value)
                }
            }
        },
        methods: {
            ...mapActions('article', []),
            saveText(){
                this.$store.dispatch('article/saveText', this);
            },
            getEvent(){
                alert();
            }
        },
        created(){

        },
        mounted(){

        }
    }
</script>

<style scoped>
    .article-title {
        margin-top: 20px;
        margin-bottom: 10px;
    }
    .btn{
        margin-top:10px;
        margin-right:10px;
    }
</style>
